<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理系统</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
	</head>
	<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	<link rel="shortcut icon" href="../images/titlelogo.png" type="image/x-icon" />
	
	<!-- <link rel="stylesheet" href="../css/font.css"> -->
	<!-- <link rel="stylesheet" href="../css/xadmin.css"> -->
	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="../js/xadmin.js"></<!-- script>
	<!-- <script language="Javascript" src="../js/nicePage.js"></script> --> 
	<script src="../js/cpexcel.js"></script>
	<script src="../js/shim.js"></script>
	<script src="../js/jszip.js"></script>
	<script src="../js/xlsx.js"></script>

		
	

	<body  onload="load()">
		<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- <script type="text/html" id="titleTpl">
  <a href="/detail/{{d.id}}" class="layui-table-link">{{d.account}}</a>
</script> -->
 
		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container ">
			
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
		<button class="layui-btn layui-btn-sm" lay-event="del" id="deel">验全选</button>
		<div class="layui-input-inline">
        <input type="tel" name="searContent" autocomplete="off"
               placeholder="姓名/手机/身份证" class="layui-input">
    </div>
	<button class="layui-btn" id="searchEmailCompany" data-type="reload">
        <i class="layui-icon" style="font-size: 20px; "></i> 搜索
    </button>
		
		 
  </div>
  
 
		<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		GGGG: <a href="javascript:;" data-page="2" class="layui-laypage-refresh"><i class="layui-icon layui-icon-refresh"></i></a>

		<script>
			 var data_json="";
						function load(){
						}
					
			  
				$.post("http://localhost:86/HBuilder/xops/Back.php",
				{
						 	 type:"User",
						 	 operation:"search",
						 	 token:"1ab66e59325257b60b971d4afa1505ce"
						 },function(data,status){
						 	// alert("data:"+(data));
						 	data_json=JSON.parse(data);
						 data_json=data_json["data"];
						 console.log(data_json)
						 // for(var i =0;i<2;i++)
						 // for(var j in data_json[i])
						 // alert("data:"+(data_json[i][j]));
						 })
					
						
			
			var pageSize = 5//每页显示数据条数
        var currentPageNo = 2;//当前页数 
			layui.use(['jquery', 'table'], function() {
				var $ = layui.jquery;
				var table = layui.table;
				
				// table =  $.extend(table, {config: {checkName: 'checked'}}) 默认全选
				table.render({
					elem: '#test',
					data: data_json,
					// url:"http://localhost:86/HBuilder/xops/Back.php",
					// method:"post",
					// where:{
					// 	type:"User",
					// 	operation:"search",
					// 	token:"1ab66e59325257b60b971d4afa1505ce"
					// },
					// contentType:"application/json",
					// headers:{},//接口的请求头
					// parseData: function(res){ //res 即为原始返回的数据
					// 					// alert("dgf:"+ res.data);
					// 					// for(var i in res.data[0])
					// 					// alert("h:"+i+" "+res.data[0][i])
					// 							
					//   return {
					//     "code": res.code, //解析接口状态
					//     // "msg": res.message, //解析提示文本
					//     "count": res.count, //解析数据长度
					// 	limit:10,
					//     "data": res["data"] ,//解析数据列表
					//   } 
					// 	  },
					//   request:  {
					// 		  // alert("dgf:"+ typeof(res));
					//   pageName: 'page', //页码的参数名称，默认：page
					//   limitName: 'total' ,//每页数据量的参数名，默认：limit
					// 
					// },
				

					
					id:"tt",
					toolbar: '#toolbarDemo',
					title: '用户数据表',
					// count: 11,
					limit: 10,
					even:true,//隔行换色
					limits: [10, 20, 30],
					
					
					initSort: {
						field: 'id' //排序字段，对应 cols 设定的各字段名
							,
						type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
					},
					cols: [
						[{
								type: 'checkbox',
								id: "ee",
								fixed: 'left',
								// LAY_CHECKED: true
							}, {
								field: 'id',
								title: 'ID',
								width: 80,
								fixed: 'left',
								unresize: true,
								sort: true,
								minWidth: 50,
								width: '4%',
								// event:'ddd',
								
							}, {
								field: 'account',
								title: '用户名',
								minWidth: 120,
								width:'10%',
								edit: 'text',
						
							}

							, {
								field: 'password',
								title: '密码',
								minWidth: 120,
								width:'10%',
								edit: 'text',
								
								sort: true
							}
							, {
								field: 'tel',
								title: '电话',
								width: '10%',
								minWidth:120,
								edit: 'text',
								
								sort: true
							}, {
								field: 'datetime',
								title: '注册时间',
								minWidth: 150,
								width:'15%',
								edit: 'text',
							    minWidth:120,
								sort: true
							}
							

							, {
								fixed: 'right',
								title: '操作',
								toolbar: '#barDemo',
								width: 150
							}
						]
					],
					// page:true,
					page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
						layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', "refresh"] //自定义分页布局
							,
						curr: 1 //设定初始在第 5 页
							,
						groups: 5 //只显示 1 个连续页码
							,
						first: true //不显示首页
							,
						last: true ,//不显示尾页
					

					},
     	            done: function(res, curr, count){
    //如果是异步请求数据方式，res即为你接口返回的信息。
    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
	
    console.log("res:",res);
    
    //得到当前页码
    console.log("curr",curr); 
    
    //得到数据总量
    console.log("co",count);
  },
  // 	response:{
  //              statusName: 'status' //规定数据状态的字段名称，默认：code
  // ,statusCode: 200 //规定成功的状态码，默认：0
  // ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
  // ,countName: 'total' //规定数据总数的字段名称，默认：count
  // ,limitName:'curr'
  // ,dataName: 'data' //规定数据列表的字段名称，默认：data
  //             },
					defaultToolbar: ['filter', 'print', 'exports']
				});

				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					// obj.config.limit = 11;
					// alert("f:"+data.length)
					for (var i in obj)
						console.log("obj:", i, " ", obj[i])
					var checkStatus = table.checkStatus(obj.config.id);
					for (var i in checkStatus)
						console.log("pp", i, " ", checkStatus[i])
					for (var i in data)
						console.log("pp22", i, " ", data[i])
					switch (obj.event) {
						case 'getCheckData':
							var data = checkStatus.data;

							console.log("getCheckData")
							layer.alert(JSON.stringify(data));
							break;
						case 'getCheckLength':
								var data = checkStatus.data;
							for (var i in checkStatus)
								console.log("i", i, " ", checkStatus[i])
							console.log("getCheckLength")
							layer.msg('选中了：' + data.length + ' 个');
							break;
						case 'isAll':
							console.log("isAll")
							layer.msg(checkStatus.isAll ? '全选' : '未全选');
							break;
							case "del":
				
							arr_id=[];
							var data = checkStatus.data;
							for(var u=0;u<data.length;u++){
								console.log("u",u," ",data[u])
							arr_id.push(data[u]["id"]);
							}
							alert("dq:"+arr_id.length+" "+data_json.indexOf(2))
							
							break;
					
					};
				});


				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					console.log("pp2:", obj)
					if (obj.event === 'del') {
						// obj.del();
						layer.confirm('真的删除行么', function(index) {
							obj.del();
							layer.close(index);
							alert("g:" + index)

						});
						// 
					} else if (obj.event === 'edit') {
						// layer.prompt({
						//   formType: 2
						//   ,value: data.email
						// }, function(value, index){
						//   obj.update({
						//     email: value
						//   });
						// 
						//      layer.close(index);
						//    });
						layer.alert('编辑行：<br>' + JSON.stringify(data))
					}
				});

				//监听单元格编辑
				table.on('edit(test)', function(obj) {
					var value = obj.value //得到修改后的值
						,
						data = obj.data //得到所在行所有键值
						,
						field = obj.field; //得到字段
					layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
				});
  arr_obj=[];
  table.on('checkbox(test)', function(obj){
	
	  arr_obj.push(obj)
		  
      });

				//监听表格复选框选择
				var checkedArr = [];
// 				table.on('checkbox(test)', function(obj){
// 					alert("gg:"+obj.type)
// 				if (obj.type=='all') return;
// 				if (obj.checked){
// 				checkedArr[obj.data.id] = obj.data.LAY_TABLE_INDEX;for(var i in checkedArr)
// 							console.log("checkedArr55:",i," ",checkedArr[i])
// 				}
// 				else{
// 				delete checkedArr[obj.data.id];
// 				for(var i in checkedArr)
// 							console.log("checkedArr66:",i," ",checkedArr[i])
// 				}
// 				});
// 

				//批量删除
				$("#deel").click(function() {
					for(var i in checkedArr)
							console.log("checkedArr44:",i," ",checkedArr[i])
					var checkStatus = table.checkStatus('test'),
						data = checkStatus.data,
						tmpArr = [],
						ids = [];
					if (checkStatus.isAll) {
						for (var i = 0; i < data.length; i++) {
							checkedArr[data[i].id] = i;
							ids.push(data[i].id);
						}
						for (var i in checkedArr)
							console.log("checkedArr:", i, " ", checkedArr[i])
						for (var i in ids)
							console.log("ids:", i, " ", ids[i])
					} else {
						for (var i = 0; i < data.length; i++) {
							tmpArr[data[i].id] = checkedArr[data[i].id];
							ids.push(data[i].id);
						}
						checkedArr = tmpArr;
						for (var i in tmpArr)
							console.log("tmpArr2:", i, " ", tmpArr[i])
						for (var i in ids)
							console.log("ids2:", i, " ", ids[i])
					}
				
					//没有选中任何一行
					// if (checkedArr.length == 0) {
					// 	layui.layer.msg('请选择要删除行');
					// 	return;
					// }
				// alert("ggqqq:"+checkedArr)
					layui.layer.confirm('真的删除么22', function(index) {
						layui.layer.close(index);
						//ajax从数据库删除 ids.toString();
						for (var i in checkedArr)
							console.log("checkedArr33:", i, " ", checkedArr[i])
						$.each(checkedArr, function(k) {
							$("tr[data-index=" + checkedArr[k] + "]").remove();
						});
						layui.layer.msg('删除成功');
					});
				
				});
		
			});
 
		function succ(){
			layui.use('table', function() {
								var table = layui.table;
// 								table.exportFile(['名字','性别','年龄'], [
//   ['张三','男','20'],
//   ['李四','女','18'],
//   ['王五','女','19']
// ], 'xlsx'); //默认导出 csv，也可以为：xls
				


			});
			// alert("sdf")
		}
			// $("input[type='checkbox']").removeAttr("checked");
		</script>
	</body>
</html>
